<template>
  <div>
    <login-top middleText="注册bilibili">
      <div slot="right" style="font-size:3.889vw" @click="$router.push('/login')">切换到登录</div>
    </login-top>
    <login-text
      label="姓名"
      placeholder="请输入姓名"
      rule="^.{6,16}$"
      class="name-text"
      @inputChange="res => model.name = res"
    />
    <login-text
      label="用户名"
      placeholder="请输入用户名"
      rule="^.{6,16}$"
      @inputChange="res => model.username = res"
    />
    <login-text
      label="密码"
      type="password"
      placeholder="请输入密码"
      rule="^.{6,16}$"
      @inputChange="res => model.password = res"
    />

    <login-btn btn-text="注册" @registerSubmit="registerSubmit" />
  </div>
</template>

<script>
import LoginTop from '@/components/common/LoginTop'
import LoginText from '@/components/common/LoginText'
import LoginBtn from '@/components/common/LoginBtn'
export default {
  components: { LoginTop, LoginText, LoginBtn },
  data() {
    return {
      model: {
        name: '',
        username: '',
        password: ''
      }
    }
  },
  methods: {
    async registerSubmit() {
      const rulg = /^.{6,16}$/
      if (rulg.test(this.model.name) && rulg.test(this.model.username) && rulg.test(this.model.password)) {
          const res = await this.$http.post('/register', this.model)
          this.$msg.fail(res.data.msg)
          localStorage.setItem('id', res.data.id)
          localStorage.setItem('token', res.data.objtoken)
          setTimeout(() => {
            this.$router.push('/userInfo')
          }, 1000);
      } else {
        this.$msg.fail('格式不正确，重新输入')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.name-text {
  margin: 4.167vw 0;
}
</style>